import { memo, useMemo } from 'react';

import { Layout } from 'antd';
import Navbar from '../Navbar';
import TagsView from '../TagsView';

import './index.less';

import { useRecoilValue } from 'recoil';
import { collapsedState, fixedHeaderState, tabNavEnableState } from '@/store/global';
import { IRouter, IRouterPathKeyRouter } from '@/types/router';

const { Header } = Layout;

export interface LayoutHeaderProps {
  routeItem: IRouter;
  routerPathKeyRouter: IRouterPathKeyRouter;
}

const LayoutHeader = memo(({ routeItem, routerPathKeyRouter }: LayoutHeaderProps) => {
  const fixedHeader = useRecoilValue(fixedHeaderState);
  const tabNavEnable = useRecoilValue(tabNavEnableState);
  const collapsed = useRecoilValue(collapsedState);

  console.log('LayoutHeader');
  const computedStyle = useMemo(() => {
    let styles;
    if (fixedHeader) {
      if (collapsed) {
        styles = {
          width: 'calc(100% - 80px)',
        };
      } else {
        styles = {
          width: 'calc(100% - 200px)',
        };
      }
    } else {
      styles = {
        width: '100%',
      };
    }
    if (tabNavEnable) {
      styles = {
        ...styles,
        height: '84px',
      };
    } else {
      styles = {
        ...styles,
        height: '48px',
      };
    }
    return styles;
  }, [fixedHeader, tabNavEnable, collapsed]);
  return (
    <>
      {/* 这里是仿照antd pro的做法,如果固定header，
      则header的定位变为fixed，此时需要一个定位为relative的header把原来的header位置撑起来 */}
      {fixedHeader ? <div style={computedStyle} /> : null}
      <Header style={computedStyle} className={fixedHeader ? 'fix-header' : ''}>
        <Navbar routerPathKeyRouter={routerPathKeyRouter} />
        {tabNavEnable ? <TagsView routerPathKeyRouter={routerPathKeyRouter} routeItem={routeItem} /> : null}
      </Header>
    </>
  );
});

export default LayoutHeader;
